<script type="text/javascript" src="{{ MEDIA_URL }}js/jquery.form.js"></script>
<script>
// prepare the form when the DOM is ready 
$(document).ready(function() { 
    var options = { 
        target:   '#output',   // target element(s) to be updated with server response 
        url:      '/form/all/form/?ajax=1',         // override for form's 'action' attribute 
        success:  showResponse  // post-submit callback 
    }; 
 
    // bind to the form's submit event 
    $('#ajax-form').submit(function() { 
        // inside event callbacks 'this' is the DOM element so we first 
        // wrap it in a jQuery object and then invoke ajaxSubmit 
        $(this).ajaxSubmit(options); 
        // always return false to prevent standard browser submit and page navigation 
        return false; 
    }); 
}); 
 
// post-submit callback 
function showResponse(responseText, statusText)  { 
    $('#output').css('background', responseText);
} 
</script>
<h2>Full Form</h2>
<p>Please enter your prefered number in between [0-16777215]</p>
<form id="ajax-form" action="/form/all/form/" method="POST">
  {{ form }}
  <input type="submit" />
</form>
<div id="output" style="height:150px;width:200px;background:#fff">Response comes here</div>
